import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus图标按需引入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// ElementPlus自动导入，实现按需引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 按需引入ElementPlus样式
import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from 'vite-plugin-style-import'
// alias
import { resolve } from 'path'
import { env } from 'node:process'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ElementPlus自动导入，实现按需引入
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', '@vueuse/core'],
      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      resolvers: [
        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
      ],
    }),
    Components({
      resolvers: [
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
    }),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          },
        },
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],

  // 强制依赖预构建
  optimizeDeps: {
    force: true,
  },

  // 配置项目路径别名（项目使用ts，需在tsconfig.json里接着配置）
  base: './',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },

  // 本地运行配置，及反向代理配置
  server: {
    host: 'localhost',
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {
      // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      '/api': {
        // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        target: env.VITE_BASE_API,
        // 开启跨域
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''), // 将api替换为空
      },
    },
  },

  // 打包
  build: {
    // terserOptions: {
    //   compress: {
    //     //生产环境时移除console
    //     drop_console: true,
    //     drop_debugger: true,
    //   },
    // },
    //关闭文件计算
    reportCompressedSize: false,
    //关闭生成map文件 可以达到缩小打包体积
    sourcemap: false, // 这个生产环境一定要关闭，不然打包的产物会很大
    // rollupOptions: {
    //   output: {
    //     // 分包。通过() => import()形式加载的组件会自动分包，第三方插件需手动分包
    //     manualChunks: {
    //       vue: ['vue', 'pinia', 'vue-router'],
    //       elementIcons: ['@element-plus/icons-vue'],
    //     },
    //     // js和css文件夹分离
    //     chunkFileNames: 'static/js/[name]-[hash].js',
    //     entryFileNames: 'static/js/[name]-[hash].js',
    //     assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
    //   },
    // },
  },
})
